<script setup lang="ts">
import { ref, reactive, onMounted, toRaw } from "vue";
import { ElMessage, type TabsPaneContext } from "element-plus";
import uploadImg from "@/components/ImageUpload/uploadImg.vue";
import { getRepairInfoApi, putRepairInfoApi } from "../../../api/repair";
import { useRepairStatus } from "@/hooks/index";
// ------------------------------------------
// ================================================================
const isShow = ref(false);
const formRef = ref();
const direction = ref("rtl");
const names = ref("first");
const RepairStatus = useRepairStatus();
const emit = defineEmits(["updateList"]);
// ================================================================
// 表单信息
const defaultState = {
  community_code: "",
  tel: "",
  device_name: "",
  desc: "",
  qu_photo: "",
  an_photo: "", //回复图片
  status: 0,
  member_type: null,
  reply: "", //报修回复
  id: null,
};
const formData = reactive({ ...defaultState });
// 验证规则
const formRules = {
  status: [{ required: true, message: "请选择", trigger: "change" }],
  reply: [{ required: true, message: "请选择", trigger: "blur" }],
};
// ================================================================
// 处理楼栋

// 编辑回显
const replyData = async (id) => {
  const { data } = await getRepairInfoApi(id);
  console.log(data);
  Object.assign(formData, data);
  isShow.value = true;
  formData.id = id;
};

// ================================================================
// 表单提交事件
const onSubmit = async () => {
  try {
    const { success, msg } = await putRepairInfoApi(formData);
    if (success === false) return ElMessage(msg);
    // 提示成功
    ElMessage.success("操作成功");
    // 关闭弹框
    isShow.value = false;
    // 列表更新
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};
// 表单关闭事件
const handleClose = () => {
  // 移除校验
  formRef.value.resetFields();
  // 重置表单数据
  Object.assign(formData, { ...defaultState });
  // 关闭表单
  isShow.value = false;
};

// -------------------------------------------------------------
defineExpose({
  isShow,
  replyData,
});
</script>

<template>
  <div>
    <el-drawer
      v-model="isShow"
      title="回复报修信息"
      size="50%"
      :direction="direction"
      :before-close="handleClose"
    >
      <!-- <template #header>
      <h4>新增活动</h4>
    </template> -->

      <template #default>
        <el-tabs class="demo-tabs" v-model="names">
          <el-tab-pane label="报修信息" name="first">
            <el-form
              label-position="top"
              :model="formData"
              ref="formRef"
              label-width="100px"
              :inline="true"
              size="normal"
            >
              <el-form-item style="width: 40%" label="所属小区">
                <el-input v-model="formData.community_code" disabled></el-input>
              </el-form-item>
              <el-form-item style="width: 40%" label="联系电话">
                <el-input v-model="formData.tel" disabled></el-input>
              </el-form-item>
              <el-form-item style="width: 40%" label="设备名称">
                <el-input v-model="formData.device_name" disabled></el-input>
              </el-form-item>
              <el-form-item style="width: 40%" label="报修描述">
                <el-input v-model="formData.desc" disabled></el-input>
              </el-form-item>
              <el-form-item style="width: 100%" label="问题图片">
                <uploadImg v-model:imgUrl="formData.qu_photo" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="回复信息" name="second">
            <el-form
              label-position="top"
              :model="formData"
              ref="editForm"
              :rules="formRules"
              label-width="100px"
              :inline="true"
              size="normal"
            >
              <el-form-item label="处理状态" prop="status" style="width: 100%">
                <el-radio-group v-model="formData.status">
                  <el-radio
                    v-for="item in RepairStatus"
                    :key="item.value"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="回复图片"
                style="width: 100%"
                prop="an_photo"
              >
                <uploadImg v-model:imgUrl="formData.an_photo" :limit="3" />
                <br />
                <p class="max">最多上传3张</p>
              </el-form-item>

              <el-form-item label="报修回复" style="width: 100%" prop="reply">
                <el-input
                  v-model="formData.reply"
                  :rows="2"
                  type="textarea"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>

      <template #footer>
        <div style="flex: auto">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped>
.max {
  color: #9e9e9e;
}
</style>
